<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../ElementUI/index.css">
    <script src="../ElementUI/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="../ElementUI/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                    >
                <el-menu-item index="1">首页</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">国产精品</template>
                    <el-menu-item index="2-1">最近更新</el-menu-item>
                    <el-menu-item index="2-2">偷拍自拍</el-menu-item>
                    <el-menu-item index="2-3">主播风情</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">日韩有码</template>
                    <el-menu-item index="3-1">最近更新</el-menu-item>
                    <el-menu-item index="3-2">AV精品</el-menu-item>
                    <el-menu-item index="3-3">制服丝袜</el-menu-item>
                    <el-menu-item index="3-4">中文字幕</el-menu-item>
                </el-submenu>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">账号管理</a></el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>

    <style>
        .el-header, .el-footer {
            background-color: #84d1ca;
            color: #939a68;
            text-align: left;
            line-height: 60px;

        }

        .el-aside {
            background-color: #e6cd98;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #f38499;
            color: #333;
            text-align: center;
            line-height: 590px;
        }
    </style>

<script>
    new Vue({
        el:"#app",
        data:{
            //定义VUE对象的模型数据，用于table展示
            tableData:[
                {date:'2019.10.10',name:'小明',address:'北京'},//每个json对象对应表格中一条数据
                {date:'2019.10.10',name:'小李',address:'南京'},
                {date:'2019.10.10',name:'小红',address:'東京'},
                {date:'2019.10.10',name:'小红',address:'東京'},
                {date:'2019.10.10',name:'小红',address:'東京'}
            ]
        },
        methods:{
            fun1:function () {

            }
        }
    })
</script>
</body>
</html>